<!--抵押管理-->
<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="car-label">关键字:</div>
      <el-input v-model="listQuery.keyString" placeholder="Title" style="width:180px;" class="filter-item" />
      <div class="car-label">放款时间:</div>
      <el-date-picker v-model="listQuery.bankLoanDate" placeholder="请选择放款时间" clearable style="width: 130px" class="filter-item" />
      <div class="car-label">贷款银行:</div>
      <el-select v-model="listQuery.bank" placeholder="请选择" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in banks" :key="item.id" :label="item.bankName" :value="item.id"  />
      </el-select>
      <div class="car-label">状态:</div>
      <el-select v-model="listQuery.pledgeStatus" style="width: 140px" class="filter-item">
        <el-option v-for="item in statuses" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button style="margin-left: 10px" class="filter-item" type="primary" icon="el-icon-search" @click="search">
        搜索
      </el-button>
      <el-button  :loading="loadingFile" class="filter-item right-btn" type="danger" icon="el-icon-download" @click="fileAc">
        附件
      </el-button>
      <el-button  :loading="loadingMort" class="filter-item right-btn" type="danger" icon="el-icon-download" @click="showMortModal">
        办理抵押
      </el-button>
      <el-button  :loading="loadingDeliver" class="filter-item right-btn" type="primary" icon="el-icon-download" @click="deliverAc">
        寄送
      </el-button>
    </div>
    <ve-table
      style="width:100%"
      :columns="columns"
      :table-data="tableData"
      :border-x="true"
      row-key-field-name="id"
      :border-y="true"
      :row-style-option="rowStyleOption"
      :radio-option="radioOption"
    />
    <div class="table-pagination">
      <ve-pagination
        :total="totalCount"
        :page-index="pageIndex"
        :page-size="pageSize"
        @on-page-number-change="pageNumberChange"
        @on-page-size-change="pageSizeChange"
      />
    </div>
    <el-dialog class="lnk-dialog"
               :close-on-click-modal="false"
               :title="'办理抵押'"
               top="10vh"
               width="30%"
               :visible.sync="newDialog"
               :append-to-body="true">
      <el-form ref="mainForm"
               size="mini" class="editForm">
        <!--表单项-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="抵押机构" class="car-form-item" required>
              <el-select style="width: 100%" v-model="newName.pledgePartnerId" class="filter-item car-col" placeholder="请选择抵押机构">
                <el-option v-for="item in mortList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newDialog = false;$refs['mainForm'].resetFields();">取消</el-button>
        <el-button type="primary" @click="update('order_pledge_handle')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
  .table-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .right-btn{
    float: right;
  }
</style>

<script>

export default {
  data() {
    return {
      newName: {},
      newDialog: false,
      loadingFile: false,
      loadingMort: false,
      loadingDeliver: false,
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
      tableData: [],
      totalCount: 1,
      banks:[],
      statuses:[{key:0,label:"待抵押"},{key:1,label:"已抵押"},{key:2,label:"待寄送"}],
      listQuery: {},
      rowStyleOption: { // 表格样式
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      mortList: [],   // 抵押机构数据
      radioOption: {
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row)
          this.selectedRowKeys = row;
        }
      },
      selectedRowKeys: '',
      columns: [
        {
          field: '',
          key: '1',
          // type=checkbox
          type: 'radio',
          title: '',
          width: 50,
          align: 'center'
        },
        {
          field: '',
          key: 'a',
          title: '序号',
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1
          }
        },
        { field: 'orderId', key: 'b', title: '订单编号', align: 'center', width: '130px' },
        { field: 'customerName', key: 'c', title: '客户姓名', align: 'center' },
        { field: 'loanAmount', key: 'e', title: '贷款金额',align: 'center', width: '' },
        { field: 'serviceGroup', key: 'f', title: '部门',align: 'center', width: '' },
        { field: 'serviceUser', key: 'g', title: '业务员',align: 'center', width: '' },
        { field: 'bank', key: 'h', title: '贷款银行', align: 'center',width: '' },
        { field: 'pledgeStatus', key: 'k', title: '抵押状态', align: 'center',},
        { field: 'bankLoanDate', key: 'i', title: '银行放款时间', align: 'center', width: '140px' },
      ]
    }
  },
  computed: {
  },
  created() {
    this.appId = sessionStorage.getItem("appId");
    this.initDatabase();
    this.getMortList();
  },
  methods: {
    /**
     * 附件
     * @date 2021/7/19
     */
    fileAc() {},
    /**
     * 寄送
     * @date 2021/7/19
     */
    deliverAc () {
      let that = this
      if(this.selectedRowKeys == "") {
        this.$message({
          type: 'error',
          message: '请选择订单！'
        })
        return;
      }
      this.$confirm('是否确认寄送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.update('order_pledge_send')
      }).catch(() => {
      });
    },
    /**
     *  办理抵押
     * @date 2021/7/19
     */
    showMortModal () {
      if (this.selectedRowKeys=='') {
        this.$message({
          type: 'error',
          message: '请选择订单！'
        })
        return;
      }
      this.newDialog = true
    },
    search(){
      this.pageIndex = 1;
      this.initDatabase();
    },
    // page number change
    pageNumberChange(pageIndex) {
      this.pageIndex = pageIndex;
       this.initDatabase();
    },

    // page size change
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.initDatabase();
    },
    async update(status){
      if(this.selectedRowKeys == "") {
        this.$message({
          type: 'error',
          message: '请选择订单！'
        })
        return;
      }

      let params = {};
      params.orderId = this.selectedRowKeys.id;
      params.id = this.selectedRowKeys.id
      params.pledgeStatus = status;
      params.pledgePartnerId = status==='order_pledge_send'?'':this.newName.pledgePartnerId;
      let data = await this.$http.post('/flow/pledge/update', params)
      console.log(data);
      if (data.code === 200) {
        this.$message({
          type: 'info',
          message: '成功！'
        })
        this.initDatabase();
        this.newDialog = false
      } else {
        this.newDialog = false
        this.$message({
          type: 'error',
          message: data.msg
        })
      }


    },
    /**
       * 获取银行列表数据
       * @date 2021-05-18
       */
      async getMortList () {
        let param = {appId: await sessionStorage.getItem("appId"),partnerType: 1};
        let data = await this.$http.post('/auth/partners/listAll', param);
        if (data.code === 200) {
          this.mortList = data.data;
        }
      },
    // Simulation table data
    async initDatabase() {
      this.tableData = [];
      this.listQuery.appId = this.appId;

      let data = await this.$http.post('/flow/pledge/list/'+ this.pageIndex + "/" + this.pageSize, this.listQuery)
      console.log(data);
      if (data.code === 200) {
        this.tableData = data.data.records;
        this.totalCount = data.data.total;
      } else {

      }




      console.log(this.tableData)




    },
    async addData(){
      this.formData.appId = "9999";
      let data = await this.$http.post('/auth/distributor/insert', this.formData)
      console.log(data);
      if (data.code === 200) {
        this.newDialog = false;
        this.initDatabase();
      } else {

      }
    }
  }
}
</script>
